<template>
    <div class="content">
        <el-form>
            <table width="100%">
                <tbody>
                <tr>
                    <th><em class="red">*</em> 作品分类：</th>
                    <td>
                        <el-cascader
                                props.expandTrigger="hover"
                                v-model="addForm.selectedKeys"
                                :options="parentCateList"
                                :props="cascaderProps"
                                clearable
                                @change="handleChange">
                        </el-cascader>
                    </td>
                </tr>
                <tr>
                    <th><em class="red">*</em> 作品名称：</th>
                    <td>
                        <el-input type="text" v-model="addForm.workName"></el-input>
                    </td>
                </tr>
                <tr >
                    <th><em class="red">*</em> 作品类型：</th>
                    <td>
                        <el-radio-group  style="margin-top: 35px" v-model="addForm.workFileType">
                            <el-radio :label="0">视频</el-radio>
                            <el-radio :label="1">图片</el-radio>
                        </el-radio-group>
                    </td>
                </tr>
                <tr>
                    <th><em class="red">*</em> 点击上传作品</th>
                    <el-upload :auto-upload="false" style="margin-top: 20px" action=""
                               :on-change="uploadWorkFile">
                        <el-button type="primary"
                                   v-if="fileURL === 'http://127.0.0.1:8081/img/worksFile/上传.png'">上传文件
                        </el-button>
                        <img :src="fileURL" v-else style="width: 50%">
                    </el-upload>
                </tr>
                <tr>
                    <th><em class="red">*</em> 点击上传封面</th>
                    <el-upload :auto-upload="false" style="margin-top: 20px" action=""
                               :on-change="uploadPoster">
                        <el-button type="primary"
                                   v-if="posterURL === 'http://127.0.0.1:8081/img/worksFile/上传.png'">
                        </el-button>
                        <img :src="posterURL" v-else style="width: 50%;">
                    </el-upload>
                </tr>
                </tbody>
            </table>
            <el-button type="primary" style="margin-top: 20px;margin-left: 300px;" @click="add(workName)">立即发布</el-button>
        </el-form>
    </div>
</template>

<script>
    import {getAllCategory} from "../assets/api/categoryApi";
    import {addWork} from "../assets/api/workInfoApi";

    export default {
        name: "formPusher",
        data() {
            return {
                fileList2: [],
                fileURL: this.$store.state.Host + '/img/worksFile/上传.png',
                posterURL: this.$store.state.Host + '/img/worksFile/上传.png',
                workFilename: '',
                poster: '',
                activeIndex: 0,
                pageNum: 1,
                pageSize: 5,
                addForm: {},
                workName: '',
                addFormRules: {
                    workName: [{required: true, message: '请输入作品名称', trigger: 'blur'}],
                    selectedKeys: [{required: true, message: '请选择作品分类', trigger: 'change'}]
                },
                selectedKeys: [],
                parentCateList: [],
                cascaderProps: {
                    value: 'categoryId',
                    label: 'categoryName',
                    children: 'children'
                },
            }
        },
        created() {
            this.getCategoryList()
        },
        methods: {
            uploadPoster(file) {
                this.poster = file.raw
            },
            uploadWorkFile(file) {
                this.workFilename = file.raw
            },
            handleChange() {
                this.addForm.rootCategoryId = this.selectedKeys[0];
            },
            getCategoryList() {
                let data = {};
                data.categoryLevel = 0;
                getAllCategory(this.pageNum, this.pageSize, data).then(res => {
                    this.parentCateList = res.data.records;
                })
            },
            add() {
                let data = new FormData()
                data.append('file', this.workFilename)
                data.append('posterFile', this.poster)
                data.append('categoryId', this.addForm.selectedKeys[1]);
                data.append('username', localStorage.getItem('username'));
                data.append('workName', this.addForm.workName);
                data.append('workFileType',this.addForm.workFileType);
                addWork(data).then(res => {
                    if (res.code !== 200) {
                        return this.$message.error(res.message);
                    } else {
                        this.$message.success(res.message);
                        this.$router.push('/PersonalWorks');
                    }

                })
            }
        }
    }
</script>

<style scoped>
    @import "../assets/css/formPusher.css";
</style>
